<template>
  <div>
    <el-scrollbar class="relative" style="height: calc(100vh - 6rem)">
      <transition
        :duration="{ enter: 800, leave: 100 }"
        mode="out-in"
        name="el-fade-in-linear"
      >
        <el-menu
          :default-active="activePath"
          :collapse="isCollapse"
          class="menu-vertical el-menu-vertical-demo"
          style="height: calc(100vh - 6rem)"
          background-color="white"
          text-color="black"
          active-text-color="var(--theme-color)"
          router
          unique-opened
        >
          <template v-for="item in AllManageRouter" :key="item.path">
            <el-menu-item
              v-if="!item.children || item.children.length === 0"
              :index="`/default/manage_mode/${item.path}`"
            >
              <el-tooltip
                :content="item.meta.title"
                placement="right"
                :disabled="!isCollapse"
              >
                <el-icon>
                  <component :is="item.meta.icon || 'Menu'" />
                </el-icon>
              </el-tooltip>

              <span>{{ item.meta.title }}</span>
            </el-menu-item>

            <el-sub-menu :index="`/default/manage_mode/${item.path}`" v-else>
              <template #title>
                <el-icon>
                  <component :is="item.meta.icon || 'Menu'" />
                </el-icon>
                <span>{{ item.meta.title }}</span>
              </template>
              <el-menu-item
                v-for="(child, childIndex) in item.children"
                :key="childIndex"
                :index="`/default/manage_mode/${item.path}/${child.path}`"
              >
                <el-icon>
                  <component :is="child.meta.icon || 'Menu'" />
                </el-icon>
                <span>{{ child.meta.title }}</span>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </transition>

      <!-- <div class="min-icon">
        <el-icon
          class="w-full h-full"
          v-if="!isCollapse"
          @click="handleClickIcon(true)"
          ><ArrowLeft
        /></el-icon>
        <el-icon class="w-full h-full" v-else @click="handleClickIcon(false)"
          ><ArrowRight
        /></el-icon>
      </div> -->
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { AllManageRouter } from "@/router/AllManageRouter";

onMounted(() => {
  // router.push({ name: "home_page" });
  activePath.value = route.path;
});

const useStore = useUserStore();
const { isCollapse } = storeToRefs(useStore);
const handleClickIcon = (type) => {
  useStore.updateIsCollapse(type);
};

const router = useRouter();
const route = useRoute();

const activePath = ref("");

watch(route, (newRoute) => {
  activePath.value = newRoute.path;
});
</script>

<style scoped lang="scss">
.min-icon {
  @apply w-[1.5rem] h-[1.5rem] absolute right-[-0.5rem] top-[48vh] z-[9999] bg-[#ccc] text-[white] flex justify-center items-center rounded-[50%];
  &:hover {
    @apply cursor-pointer  bg-[var(--theme-color)];
  }
}
</style>